<template>
  <div style="padding:30px 40px;">
    <a-form :form="form" style="margin-top:30px;">
      <a-row>
        <a-col :span="5">
          <a-form-item>
            <a-input placeholder="批次号" v-model="batchNo" />
          </a-form-item>
          <a-form-item v-bind="formItemLayout">
            <a-date-picker
              placeholder="交易时间"
              format="YYYYMMDD"
              @change="onChange"
              v-model="transDate1"
              :allowClear="isClear"
            />
          </a-form-item>
        </a-col>

        <a-col :span="5" :offset="1">
          <a-form-item>
            <a-input placeholder="会员编号" v-model="memberNo" />
          </a-form-item>
          <a-form-item>
            <a-select v-decorator="['select',{ rules: [{ message: '分账结果' }] },]" placeholder="分账结果">
              <a-select-option value="unpaid">待支付</a-select-option>
              <a-select-option value="success">成功</a-select-option>
              <a-select-option value="failure">失败</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="5" :offset="1">
          <a-form-item>
            <a-input placeholder="客户全称" v-model="memberName" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16" style="margin-bottom: 20px;">
        <a-col :span="8" :style="{ textAlign: 'left' }">
          <a-row type="flex" justify="space-between">
            <a-col :span="7">
              <a-button class="button_sty" type="primary" @click="reset">重置</a-button>
            </a-col>
            <a-col :span="7">
              <a-button
                class="button_sty"
                type="primary"
                :loading="loading"
                @click="handleSearch"
              >查询</a-button>
            </a-col>
            <a-col :span="7">
              <a-button class="button_sty" type="primary" @click="fetchExport">导出</a-button>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      :columns="columns"
      :dataSource="arr"
      :pagination="false"
      :rowKey="record => record.transDate+parseInt(100*Math.random())+parseInt(100*Math.random())"
    >
      <span slot="amount" slot-scope="record">
        <span>{{record.amount | cashfilter}}</span>
      </span>
      <span slot="states" slot-scope="record">
        <span v-if="record.states=='unpaid'">待支付</span>
        <span v-if="record.states=='success'">成功</span>
        <span v-if="record.states=='failure'">失败</span>
      </span>
    </a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 10px"
    />
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
// import GlobalFooter from "../../layouts/GlobalFooter";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  { title: "批次号", dataIndex: "batchNo" },
  { title: "分账单号", dataIndex: "transOrderNo" },
  { title: "分账日期", dataIndex: "transDate" },
  { title: "分账时间", dataIndex: "transTime" },
  { title: "会员编号", dataIndex: "memberNo" },
  { title: "客户全称", dataIndex: "memberName" },
  { title: "分账金额（元）", scopedSlots: { customRender: "amount" } },
  { title: "分账结果", dataIndex: "status" }
];

const data = [{}];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    // GlobalFooter,
    ATabPane,
    ATabs,
    AForm
  },
  data() {
    return {
      today: new Date(),
      data,
      columns,
      list: {},
      loading: false,
      loading2: false,
      isClear: false,
      transDate1: moment(new Date()),
      transDate2: "",
      query: {
        current: 1,
        pageSize: 6
      },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      arr: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 6 },
          sm: { span: 6 },
          md: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 17 },
          sm: { span: 18 },
          md: { span: 19 }
        }
      },
      pagination: { current: null, total: null },
      memberNo: null,
      batchNo: null,
      states: null,
      memberName: null
    };
  },
  watch: {},
  computed: {},
  filters: {
    cashfilter(value) {
      return parseFloat(value / 100).toFixed(2);
      // return Number(value).toFixed(2)
    }
  },
  mounted() {
    let date = new Date();
    let month = date.getMonth();
    let dates = date.getDate();
    if (date.getMonth() < 9) {
      month = "0" + parseInt(month + 1);
    } else {
      month = month + 1;
    }
    if (date.getDate() <= 9) {
      dates = "0" + date.getDate();
    }
    this.transDate2 = date.getFullYear() + "" + month + "" + dates;

    // this.handleSearch();
  },
  methods: {
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);
      this.query.current = page;
      this.query.pageSize = pageSize;
      this.handleSearch();
    },
    moment,
    onChange(dates, dateStrings) {
      // console.log(dateStrings)
      // console.log(this.transDate1)
      this.transDate2 = dateStrings;
    },
    reset() {
      this.transDate1 = moment(new Date());
      this.memberNo = null;
      this.batchNo = null;
      this.states = null;
      this.memberName = null;
    },

    handleSearch() {
      this.loading = true;
      this.status = this.form.getFieldValue("select");
      // console.log(this.transDate2);
      // console.log(this.status);
      if (this.memberNo == "") {
        this.memberNo = null;
      }
      if (this.batchNo == "") {
        this.batchNo = null;
      }
      if (this.memberName == "") {
        this.memberName = null;
      }
      if (this.status == "") {
        this.status = null;
      }

      this.$axios
        .post("/agent/rechargeDivideAccount/findDetailList", {
          transDate: this.transDate2,
          memberNo: this.memberNo,
          memberName: this.memberName,
          batchNo: this.batchNo,
          status: this.status,
          current: this.query.current,
          pageSize: this.query.pageSize
        })
        .then(res => {
          this.loading = false;
          console.log("查询结果", res);
          if (res.data.code == "OK") {
            this.arr = res.data.list;
            this.pagination.current = res.data.current;
            this.pagination.total = res.data.total;
          } else {
            this.$message.error(res.data.message);
            this.arr= [];
          }
        });
    },

    gologin() {
      this.visible = false;
      this.$router.push("/home");
    },
    fetchExport() {
      if(this.arr == []){
        this.$message.error("当前查询无数据");
        return;
      }
      if (this.memberNo == "") {
        this.memberNo = null;
      }
      if (this.batchNo == "") {
        this.batchNo = null;
      }
      if (this.memberName == "") {
        this.memberName = null;
      }
      if (this.status == "") {
        this.status = null;
      }
      this.$axios
        .post("/agent/rechargeDivideAccount/fetchExportQueryApi", {
          transDate: this.transDate2,
          memberNo: this.memberNo,
          memberName: this.memberName,
          batchNo: this.batchNo,
          status: this.status,
          current: this.query.current,
          pageSize: this.query.pageSize
        })
        .then(res => {
          let token = localStorage.getItem("token");
          let downloadUrl =
            "/memberweb/rechargeDivideAccount/excelListDownloadApi?Authorization=" +
            token;
          location.href = downloadUrl;
          //window.open(downloadUrl, "_black");
        });
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.ant-tabs-nav {
  float: right;
}
.content4 {
  display: flex;
  margin-bottom: 20px;
  .conleft {
    font-size: 16px;
    font-weight: 600;
    width: 180px;
  }
  .conright {
    padding: 0 20px;
    span {
      margin-right: 20px;
    }
  }
}
.button_sty {
  width: 100%;
}
</style>
